<template>
	<view class="ul image-text-nav" :class="'terminal' + terminal">
		<view class="li" v-for="index in 4" @click="jumpLink()">
			<!--<router-link class="item" :to="jumpLink(item.linkObj)">-->
			<!-- #ifdef APP-PLUS -->
			<view class="imgBox" v-if="index==1" @click="itemClick(1,'男性行服')">
				<image class="img" :src="require('../static/images/appointment/icon_nan.png')"></image>
			</view>
			<view class="imgBox" v-if="index==2" @click="itemClick(2,'女性行服')">
				<image class="img" :src="require('../static/images/appointment/icon_nv.png')"></image>
			</view>
			<view class="imgBox" style="width: 110upx;" v-if="index==3" @click="itemClick(3,'高级定制')">
				<image class="img" style="width: 88upx;height: 88upx;" :src="require('../static/images/appointment/icon_hang.png')"></image>
				<view style="font-size: 18px;">高级定制</view>
			</view>
			<view class="imgBox" v-if="index==4" @click="itemClick(4,'附加商品')">
				<image class="img" :src="require('../static/images/appointment/icon_fu.png')"></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="imgBox" v-if="index==0" @click="itemClick(1,'男性行服')">
				<image class="img" :src="require('../static/images/appointment/icon_nan.png')"></image>
			</view>
			<view class="imgBox" v-if="index==1" @click="itemClick(2,'女性行服')">
				<image class="img" :src="require('../static/images/appointment/icon_nv.png')"></image>
			</view>
			<view class="imgBox" v-if="index==2" @click="itemClick(3,'高级定制')">
				<image class="img" style="width: 84upx;height: 84upx;" :src="require('../static/images/appointment/icon_hang.png')"></image>
				<view style="font-size: 22upx;color: #666;margin-top: 2upx;">高级定制</view>
			</view>
			<view class="imgBox" v-if="index==3" @click="itemClick(4,'附加商品')">
				<image class="img" :src="require('../static/images/appointment/icon_fu.png')"></image>
			</view>
			<!-- #endif -->
		</view>
	</view>

</template>

<script>
	import {
		funMixin
	} from '../config/mixin'
	export default {
		name: 'imageTextNav',
		mixins: [funMixin],
		props: {
			terminal: {
				type: Number,
				default: 4
			},
			componentContent: {
				type: Object
			}
		},
		methods: {
			// 计算生成格子百分比
			getItemValue(val) {
				const len = parseInt(4)
				if (len === 0) {
					return 0
				} else {
					return (1 / len * 10000 / 100.00)
				}
			},
			itemClick(index,name){
				uni.navigateTo({
					url:'/pages_category_page1/goodsModule/goodsList?name='+name+'&band='+index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image-text-nav {
		background-color: #fff;
		min-height: 100upx;
		width: 710upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		padding: 20upx 0;

		.li {
			text-align: center;
			width: 88upx;
			height: 120upx;
			.imgBox {
				width: 100%;
				height: 100%;
				display: inline-block;
				.img {
					width: 100%;
					height: 100%;
					object-fit: cover;

				}
			}

			.h4 {
				font-size: 24upx;
				color: #333;
				line-height: 33upx;
				font-weight: 400;
			}
		}

		&.terminal4 {
			width: 1000upx;

			.li {
				.img-box {
					display: inline-block;
					width: 100upx;
					height: 100upx;
					box-shadow: 0 10upx 30upx rgba(51, 51, 51, 0.15);

					&-inner {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
					}

					.imgBox {
						width: 60upx;
						height: 60upx;
					}
				}

				.h4 {
					font-size: 18upx;
					color: #ccc;
					line-height: 1em;
					padding-top: 20upx;
				}
			}
		}
	}
</style>
